<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小u课堂</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 导航菜单 -->
    <nav>
        <div class="main">
            <img src="./img/index/logo.png" alt="" class="logo">
            <ul class="">
                <li class="check"><a href="javascript:;">首页</a></li>
                <li><a href="./html/online.html">同步课程</a></li>
                <li><a href="javascript:;">精品课程</a></li>
            </ul>
            <div class="search">
                <div class="left">课程<i class="iconfont icon-down"></i>
                </div>
                <input type="text" placeholder="搜索感兴趣的内容" id="searchvalue">
                <img src="./img/index/search.png" alt="" class="search_btn">
            </div>
            <div class="login">
                <a href="./pages/loginAndRegister/login.html">登陆</a>
                /
                <a href="./pages/loginAndRegister/register.html">注册</a>
            </div>
            <div class="user">
                <img src="./img/login/user.png" alt="">
                <div class="userlist">
                    <ul>
                        <li>我是用户名</li>
                        <li>课程中心</li>
                        <li>订单中心</li>
                        <li>资金管理</li>
                        <li>个人中心</li>
                        <li class="out">退出登陆</li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主体内容 -->
    <main>
        <!-- banner -->
        <div class="banner">
            <ul class="img" id="bannerContainer">
                <!-- <li class="active"><img src="./img/index/tbanner1.png" alt=""></li>
                <li><img src="./img/index/tbanner1.png" alt=""></li>
                <li><img src="./img/index/tbanner3.png" alt=""></li> -->
            </ul>
            <ul class="list">
                <!-- <li class="high">24小时不断电大课堂</li>
                <li>内容不够2</li>
                <li>内容不够3</li> -->
            </ul>
        </div>

        <!-- 同步课程 -->
        <div class="online">
            <div class="title">
                <span class="line"></span>
                <span class="cont">同步课程</span>
                <span class="more">更多课程<i class="iconfont icon-right1"></i>
                </span>
            </div>
            <div class="onlineCont">
                <div class="content">
                    <ul id="tongbuContainer">
                        <!--  <li>
                            <div class="top">
                                <span class="rj">人教版</span>
                                <img src="./img/index/banner1.png" alt="" class="m">
                                <p>学科：英语</p>
                            </div>
                            <div class="bottom">
                                <div class="left">
                                    <span>行政管理专业班</span>
                                    <span class="time">地区：北京</span>
                                </div>
                                <div class="right">免费学习</div>
                            </div>
                        </li>
                        <li>
                            <div class="top">
                                <span class="rj">人教版</span>
                                <img src="./img/index/banner1.png" alt="" class="m">
                                <p>学科：英语</p>
                            </div>
                            <div class="bottom">
                                <div class="left">
                                    <span>行政管理专业班</span>
                                    <span class="time">地区：北京</span>
                                </div>
                                <div class="right">50元</div>
                            </div>
                        </li> -->
                    </ul>
                </div>
            </div>
        </div>

        <!-- 页面广告 -->
        <div class="contBanner">
            <img src="./img/index/WechatIMG20.png" alt="">
        </div>


        <!-- 精品课程 -->
        <div class="goodClass">
            <div class="title">
                <span class="line"></span>
                <span class="cont">精品课程</span>
                <span class="more">更多课程<i class="iconfont icon-right1"></i>
                </span>
            </div>
            <div class="onlineCont">
                <div class="content">
                    <ul id="jingpincontainer">
                        <!-- <li>
                            <div class="top">
                                <span class="rj">人教版</span>
                                <img src="./img/index/banner1.png" alt="" class="m">
                                <p>学科：英语</p>
                            </div>
                            <div class="bottom">
                                <div class="left">
                                    <span>行政管理专业班</span>
                                    <span class="time">地区：天津</span>
                                </div>
                                <div class="right">50元</div>
                            </div>
                        </li> -->
                    </ul>
                </div>
                <div class="rightCont">
                    <img src="./img/index/good_banner7.png" alt="">
                </div>
            </div>
        </div>

        <div class="footB">
            <div><img src="./img/index/foot1.png" alt=""></div>
            <div><img src="./img/index/foot2.png" alt=""></div>
        </div>

        <div class="fix">
            <div class="lesson">
                <img src="./img/index/mylesson.png" alt="">
            </div>
            <div class="top">
                <img src="./img/index/gotop.png" alt="">
            </div>
        </div>
    </main>

    <footer>
        <div class="cont">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照
                    | 教师资格证公示

                </p>
                <p>
                    京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备
                    01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
                    食品经营许可证：JY13101140088888
                </p>
                <p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>

    <script src="js/ujiuye.js"></script>
    <script src="js/index.js"></script>
</body>

</html>
<!-- 先引入jQuery  然后再引入封装好的 jQuery ajax -->
<script src="./utils/jquery.min.js"></script>
<script src="./utils/ajax.js"></script>
<script>
    // 写ajax的请求
    // 获取banners

    getbanner()
    async function getbanner() {

        // 向后端发送请求
        //let [err,results]= await ajax({type:"get",url:"http://localhost:3000/banners",})
        let [err, results] = await ajax({ url: api_url + "/banners", })

        // 错误拦截
        if (err) {
            alert("轮播图求出错了")
            return
        }
        //console.log([err,results]);
        if (results.status != 200) {
            alert(results.msg)
            return
        }


        // 渲染页面
        let str = ``
        let str1 = ``
        results.results.forEach((value, index) => {
            str += `<li ${index == 0 ? 'class="active"' : ''}><img src="${value.image_src}" alt=""></li>\n`
            str1 += `<li  ${index == 0 ? 'class="high"' : ''}>${value.title}</li>\n`
        });
        // console.log(str);

        $("#bannerContainer").html(str)
        $(".list").html(str1)

        // 先渲染页面  然后再轮播
        lunBoTu()

    }




    /*  // 同步课程
     gettongbu()
     async function gettongbu(){
 
         let [err,results]=await ajax({
             url:api_url+"/courses",
             data:{
                 type:1
             }
         })
         // 错误拦截
        if(err){
             alert("同步课程请求出错了")
             return
        }
         
        if(results.status!=200){
             alert(results.msg)
             return
        }
 
         //console.log(results);
        let str=``
        results.results.forEach(value=>{
 
             str+=`<li>
                     <div class="top">
                         <span class="rj">${value.type_name}</span>
                         <img src="${value.image_src}" alt="" class="m">
                         <p>学科：${value.subject_name}</p>
                     </div>
                     <div class="bottom">
                         <div class="left">
                             <span>${value.title}</span>
                             <span class="time">地区：${value.area_name}</span>
                         </div>
                         <div class="right">${ value.price==0?"免费学习":value.price+"元" }</div>
                     </div>
                 </li>`
 
        })
 
        //console.log(str);
        $("#tongbuContainer").html(str)
 
     }
 
 
 
      // 精品课程
     getjingpin()
     async function getjingpin(){
 
         let [err,results]=await ajax({
             url:api_url+"/courses",
             data:{
                 type:2
             }
         })
         // 错误拦截
        if(err){
             alert("精品请求出错了")
             return
        }
         
        if(results.status!=200){
             alert(results.msg)
             return
        }
 
         //console.log(results);
        let str=``
        results.results.forEach(value=>{
 
             str+=`<li>
                     <div class="top">
                         <span class="rj">${value.type_name}</span>
                         <img src="${value.image_src}" alt="" class="m">
                         <p>学科：${value.subject_name}</p>
                     </div>
                     <div class="bottom">
                         <div class="left">
                             <span>${value.title}</span>
                             <span class="time">地区：${value.area_name}</span>
                         </div>
                         <div class="right">${ value.price==0?"免费学习":value.price+"元" }</div>
                     </div>
                 </li>`
 
        })
 
        //console.log(str);
        $("#jingpincontainer").html(str)
 
     } */



  /*   // 同步和精品课程
    getcourses(1, "#tongbuContainer")
    getcourses(2, "#jingpincontainer")

    async function getcourses(type, parent) {

        let [err, results] = await ajax({
            url: api_url + "/courses",
            data: {
                type
            }
        })
        // 错误拦截
        if (err) {
            alert(type == 1 ? "同步课程请求出错了" : "精品课程请求出错了")
            return
        }

        if (results.status != 200) {
            alert(results.msg)
            return
        }

        //console.log(results);
        let str = ``
        results.results.forEach(value => {
       

            str += `<li cid="${value.cid}">
                        <div class="top">
                            <span class="rj">${value.type_name}</span>
                            <img src="${value.image_src}" alt="" class="m">
                            <p>学科：${value.subject_name}</p>
                        </div>
                        <div class="bottom">
                            <div class="left">
                                <span>${value.title}</span>
                                <span class="time">地区：${value.area_name}</span>
                            </div>
                            <div class="right">${value.price == 0 ? "免费学习" : value.price + "元"}</div>
                        </div>
                    </li>`

        })

        //console.log(str);
        $(parent).html(str)

    }


    // 点击跳转到详情
    // 事件委托
    $(".content").on("click","li",function(){
        // 获取自定义的cid属性
        let cid=$(this).attr("cid")

        location.href=`./pages/videoDetail.html?cid=${cid}`
    })
 */

  /*  // 同步和精品课程
    getcourses(1, "#tongbuContainer")
    getcourses(2, "#jingpincontainer")

    async function getcourses(type, parent) {

        let [err, results] = await ajax({
            url: api_url + "/courses",
            data: {
                type
            }
        })
        // 错误拦截
        if (err) {
            alert(type == 1 ? "同步课程请求出错了" : "精品课程请求出错了")
            return
        }

        if (results.status != 200) {
            alert(results.msg)
            return
        }

        //console.log(results);
        let str = ``
        results.results.forEach(value => {
       

            str += `<li onclick="godetail('${value.cid}')" >
                        <div class="top">
                            <span class="rj">${value.type_name}</span>
                            <img src="${value.image_src}" alt="" class="m">
                            <p>学科：${value.subject_name}</p>
                        </div>
                        <div class="bottom">
                            <div class="left">
                                <span>${value.title}</span>
                                <span class="time">地区：${value.area_name}</span>
                            </div>
                            <div class="right">${value.price == 0 ? "免费学习" : value.price + "元"}</div>
                        </div>
                    </li>`

        })

        //console.log(str);
        $(parent).html(str)

    }


    // 点击跳转到详情
    // 事件委托
    function godetail(cid){
        // 获取自定义的cid属性

        location.href=`./pages/videoDetail.html?cid=${cid}`
    } */



     // 同步和精品课程
     getcourses(1, "#tongbuContainer")
    getcourses(2, "#jingpincontainer")

    async function getcourses(type, parent) {

        let [err, results] = await ajax({
            url: api_url + "/courses",
            data: {
                type
            }
        })
        // 错误拦截
        if (err) {
            alert(type == 1 ? "同步课程请求出错了" : "精品课程请求出错了")
            return
        }

        if (results.status != 200) {
            alert(results.msg)
            return
        }

        //console.log(results);
        let str = ``
        results.results.forEach(value => {
       

            str += `<li>
                        <a href="./pages/videoDetail.html?cid=${value.cid}">
                            <div class="top">
                                <span class="rj">${value.type_name}</span>
                                <img src="${value.image_src}" alt="" class="m">
                                <p>学科：${value.subject_name}</p>
                            </div>
                            <div class="bottom">
                                <div class="left">
                                    <span>${value.title}</span>
                                    <span class="time">地区：${value.area_name}</span>
                                </div>
                                <div class="right">${value.price == 0 ? "免费学习" : value.price + "元"}</div>
                            </div>  
                        </a>
                    </li>`

        })

        //console.log(str);
        $(parent).html(str)

    }



    // 点击搜索
    $(".search_btn").on("click", function () {

        // 搜索的内容不能为空
        let searchvalue = $("#searchvalue").val()
        if (!searchvalue) {
            alert("请输入搜索内容")
            return
        }

        // 跳转页面
        location.href=`./pages/search_list.html?searchvalue=${searchvalue}`

    })



</script>